<template>
  <view class='signature'>
    <view class='h-100'>
      <l-signature
        disableScroll
        backgroundColor='white'
        ref='signatureRef'
        :penColor='penColor'
        :penSize='penSize'
        :openSmooth='openSmooth'
      ></l-signature>
    </view>
    <view class='button'>
      <view @click='onClick("clear")'> 
        <!-- clear按钮的SVG图标 -->
        清空
      </view>
      <view @click='onClick("undo")'>
        <!-- undo按钮的SVG图标 -->
        撤回
      </view>
      <view @click='onClick("save")'>
        <!-- save按钮的SVG图标 -->
        保存
      </view>
    </view>
  </view>
</template>


<script>
export default {
  data() {
    return {
      title: 'Hello',
      penColor: 'black',
      penSize: 5,
      url: '',
      openSmooth: true
    }
  },
  methods: {
    onClick(type) {
      if (type == 'openSmooth') {
        this.openSmooth = !this.openSmooth
        return
      }
      if (type == 'save') {
        this.$refs.signatureRef.canvasToTempFilePath({
          success: (res) => {
            // 是否为空画板 无签名
            console.log(res.isEmpty)
            // 生成图片的临时路径
            // H5 生成的是base64
            this.url = res.tempFilePath
			console.log(this.url)
			uni.setStorageSync('url',res.tempFilePath)
			uni.redirectTo({
				url:'/pages/contract/viewContract?imgurl='+encodeURIComponent(JSON.stringify(this.url))
			})
          }
        })
        return
      }
      if (this.$refs.signatureRef)
        this.$refs.signatureRef[type]()
    }
  }
}
</script>


<style>
.signature {
  position: relative;
  /* border: 1px solid red; */
  /* min-height: 80vh; */
  height: 100%;
}
.button {
	border-top: 1px solid gray;
  position: absolute;
  background: white;
  padding: 20px;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  width: 100%;
  align-items: center;
}
.h-100 {
  height: 800px;
}
</style>

